<template>
    <div class="popularizeAnalysis-container" style="display:flex">
        <div class="left">
          <div>
            <el-radio-group v-model="radio1" @change="ShuJuStyle">
              <el-radio-button label="今日推广数据"></el-radio-button>
              <el-radio-button label="历史推广数据"></el-radio-button>
            </el-radio-group>
          </div>
            <!-- Ecahrts -->
            <el-row class="filterCondition" v-show="!LiShiShow">
              <!-- <h3>推广数据统计分部图</h3> -->
              <div id="main" ref="chart" style="height: 400px;"></div>
            </el-row>
            <!-- 表格 -->
            <el-table :data="tableDataA"  border style="width: 100%" v-show="!LiShiShow">
                <el-table-column align="center"  label="今日推广数据">
                    <el-table-column prop="name" label="城市"></el-table-column>
                    <el-table-column prop="distributionCount" label="接受数据上限"></el-table-column>
                    <el-table-column label="今日推广量">
                        <!-- <template slot-scope="scope"><span>{{ scope.row.disCount}}</span><apan>{{ scope.row.slCount | YSLPanDuan}}</apan></template> -->
                        <template slot-scope="scope">
                          <span v-if="scope.row.city == '上海自营' || scope.row.city == '上海加盟' || scope.row.city == '南京加盟'">{{ scope.row.disCount}} (已受理 {{ scope.row.slCount}} )</span>
                          <span v-else>{{ scope.row.disCount}} (已撞库 {{ scope.row.slCount}} )</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="dfpCount" label="昨日待分配"></el-table-column>
                    <el-table-column prop="yuLiang" label="余量"></el-table-column>
                    <el-table-column prop="loss" label="外发公司流失"></el-table-column>
                    <el-table-column prop="cityLoss" label="外发城市流失"></el-table-column>
                </el-table-column>
            </el-table>
            <br>
            <!-- 紧接下一下表格 -->
            <el-row class="filterCondition" v-show="LiShiShow">
              <el-form label-width="82px" label-position="right" ref="formLabelAlign"  :model="formLabelAlign">
                <el-form-item prop="timeType" label="时间">
                  <el-select v-model="formLabelAlign.dayType" id="time" @change="holderQuJian" placeholder="时间" >
                    <el-option
                      v-for="item in timeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="completeTime" label="选择区间" v-show="isShow">
                  <div class="block" >
                    <el-date-picker
                      v-model="completeTime"
                      type="daterange"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :picker-options="pickerOptions"
                    ></el-date-picker>
                  </div>
                </el-form-item>
                <el-form-item class="BTN">
                <el-button style="background-color:#c73e3a;color:#fff;" @click="checked" class="check" :disabled="disTBN">查询</el-button>
                </el-form-item>
              </el-form>
            </el-row><br>
            <!-- 历史表格 -->
            <!-- <el-table :data="tableDataB"  border style="width: 100%" v-show="LiShiShow" :span-method="arraySpanMethod" :row-style="headerColor"> -->
            <el-table :data="tableDataB"  border style="width: 100%" v-show="LiShiShow"  :row-style="headerColor">
              <el-table-column align="center"  label="历史推广数据">
                <el-table-column  label="日期" sortable>
                  <template slot-scope="scope">{{ scope.row.time | formatTime }}</template>
                </el-table-column>
                <el-table-column prop="shZyCount" label="上海自营/条" ></el-table-column>
                <el-table-column prop="shJmCount" label="上海加盟/条"></el-table-column>
                <el-table-column prop="njJmCount" label="南京加盟/条"></el-table-column>
                <el-table-column prop="hzWfCount" label="杭州外发/条"></el-table-column>
                <el-table-column prop="whWfCount" label="武汉外发/条"></el-table-column>
                <el-table-column prop="fsWfCount" label="佛山外发/条"></el-table-column>
                <el-table-column prop="szydCount" label="深圳优贷/条"></el-table-column>
                <el-table-column prop="ydwGzCount" label="广州柚贷/条"></el-table-column>
                <el-table-column prop="gzhdCount" label="广州好贷/条"></el-table-column>
                <el-table-column prop="hzxgCount" label="杭州迅鸽/条"></el-table-column>
                <el-table-column prop="szxgCount" label="苏州迅鸽/条"></el-table-column>
                <el-table-column prop="whxgCount" label="武汉迅鸽/条"></el-table-column>
                <el-table-column prop="whYmswCount" label="武汉英茂商务/条"></el-table-column>
                <el-table-column prop="shwsjf" label="上海网商金服/条"></el-table-column>
                <el-table-column prop="jtXb" label="天津曦本/条"></el-table-column>
                <el-table-column prop="fzXb" label="福州曦本/条"></el-table-column>
                <el-table-column prop="hzYx" label="杭州易行/条"></el-table-column>
                <el-table-column prop="gzSd" label="广州闪贷/条"></el-table-column>
              </el-table-column>
            </el-table>
        </div>
        <!-- <br> -->
        <div class="right">
          <!-- <div class="up" style="background-color:red">vsvsdvsdv</div>
          <div class="down" style="background-color:grey">dvsdvbdsv</div> -->
        </div>
    </div>
</template>

<script>
import moment from 'moment';   // 导入时间戳
import echarts from 'echarts';
export default {
  name: "index",
  data () {
      return {
          //时间区间
          pickerOptions: {
              shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近一个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近三个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                  picker.$emit('pick', [start, end]);
                }
              }]
          },
          radio1: '今日推广数据',
          //客户筛选区域数据
          formLabelAlign: {
            dayType: "tomonth", 	//日期类型
            timeType: "",  //时间类型
            searchType:"",
            beginTime : "",  //开始时间
            endTime : "",  //	结束时间
          },
          LiShiShow:false, //表格显隐参数
          timeList: [       //时间选择生成内容
            { id: "today", name: "今日" },
            { id: "JinLiangDays", name: "近两天" },
            { id: "sevenDay", name: "最近七天" },
            { id: "tomonth", name: "本月" },
            { id: "customize", name: "自定义" },
          ],
          isShow:false, //时间区间隐藏状态
          disTBN:false,//禁用按钮的状态值
          completeTime:"", //完整版时间区间
          tableDataA: [],
          tableDataB: [{date: '2019-10-30',name: '测试',address: '测试',address1: '测试'}],
          EchartsData:{
                JSSXData:[0,0,0,0,0,0,0,0,0,0],
                ZRDFData:[0,0,0,0,0,0,0,0,0,0],
                JRTGData:[0,0,0,0,0,0,0,0,0,0],
                YSLData:[0,0,0,0,0,0,0,0,0,0],
                YLData:[0,0,0,0,0,0,0,0,0,0],
          },
          EchartsCityList:[]
      }
  },
  methods: {
      //Echats部分
      drawPie(id){
            this.charts = echarts.init(document.getElementById(id))
            this.charts.clear()
            this.charts.setOption({
            //   text: '推广数据统计分部图'
            title: {},
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data:['接收数据上限','昨日待分配','今日推广量','余量','已受理']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        // data : ['上海自营','上海加盟','南京加盟','杭州外发','武汉外发','佛山外发','深圳优贷','柚贷网-广州','杭州迅鸽','苏州迅鸽','武汉迅鸽','武汉英茂商务']
                        data : this.EchartsCityList
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'接收数据上限',
                        type:'bar',
                        data:this.EchartsData.JSSXData,
                    },
                    {
                        name:'昨日待分配',
                        type:'bar',
                        stack: '分推数据',
                        data:this.EchartsData.ZRDFData,
                    },
                    {
                        name:'今日推广量',
                        type:'bar',
                        stack: '分推数据',
                        data:this.EchartsData.JRTGData
                    },
                    {
                        name:'余量',
                        type:'bar',
                        data:this.EchartsData.YLData
                    },
                    {
                        name:'已受理',
                        type:'bar',
                        data:this.EchartsData.YSLData,
                        // markLine : {
                        //     lineStyle: {
                        //         normal: {
                        //             type: 'dashed'
                        //         }
                        //     },
                        //     data : [
                        //         [{type : 'min'}, {type : 'max'}]
                        //     ]
                        // }
                }]  
            })
      },
      //tab切换表格显示
      ShuJuStyle(val){
        // console.log(val);
        if (val == "历史推广数据") {
          this.LiShiShow = true
        }else {
          this.LiShiShow = false
        }
      },
      //判断时间区间是否隐藏
      holderQuJian(vId){
          let obj = {};
          obj = this.timeList.find(item => {
            //这里的fenselectList就是上面遍历的数据源
            return item.id === vId; //筛选出匹配数据
          });
          // console.log(obj.name);
          if (obj.id == "customize") {
            this.isShow = true;
          } else if (obj.id == "today") {
            this.isShow = false;
            this.formLabelAlign.beginTime = moment(new Date()).format("YYYY-MM-DD ") ;
            this.formLabelAlign.endTime = moment(new Date()).format("YYYY-MM-DD ");
            this.completeTime = "";
          } else if (obj.id == "JinLiangDays") {
            this.isShow = false;
            this.formLabelAlign.beginTime = moment(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 1)).format("YYYY-MM-DD ") ;
            this.formLabelAlign.endTime = moment(new Date()).format("YYYY-MM-DD ");
            this.completeTime = "";
          } else if (obj.id == "sevenDay") {
            this.isShow = false;
            this.formLabelAlign.beginTime = moment(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7)).format("YYYY-MM-DD ") ;
            this.formLabelAlign.endTime = moment(new Date()).format("YYYY-MM-DD ");
            this.completeTime = "";
          } else if (obj.id == "tomonth") {
            this.isShow = false;
            this.formLabelAlign.beginTime = moment(new Date()).format("YYYY-MM-01 ") ;
            this.formLabelAlign.endTime = moment(new Date()).format("YYYY-MM-DD ");
            this.completeTime = "";
          } else {
            this.isShow = false;
            this.completeTime = "";
          }
      },
      //将按钮禁用两秒
      disButton(){
          this.disTBN = true
          setTimeout(() => {
            this.disTBN = false
          }, 2000);
      },
      //首行总计为红色
      headerColor({row,rowIndex}){
        if (rowIndex == 0) {
          return 'color:red'
        }
      },
      getSummaries(param) {
        // console.log(param);
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总计';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += '';
          } else {
            sums[index] = '';
          }
        });
        // this.tableData.unshift(sums); 
        // console.log(sums);
        return sums;
      },
      // 插入合计的数据
      summaryFun(){
        if (this.tableDataB == []) {
          return false;
        }else{
          let shZyCount = null
          let shJmCount = null
          let njJmCount = null
          let hzWfCount = null
          let whWfCount = null
          let fsWfCount = null
          let szydCount = null
          let ydwGzCount = null
          let hzxgCount = null
          let szxgCount = null
          let whxgCount = null
          let whYmswCount = null;
          let gzhdCount = null;
          let dangyueDis = null
          let realMoney = null
          let realDis = null
          let customerCount = null;
          let shwsjf = null;
          let jtXb = null;
          let fzXb = null;
          let hzYx = null;
          let gzSd = null;
          for (let i = 0; i < this.tableDataB.length; i++) {
            shZyCount += this.tableDataB[i].shZyCount; 
            shJmCount += this.tableDataB[i].shJmCount; 
            njJmCount += this.tableDataB[i].njJmCount; 
            hzWfCount += this.tableDataB[i].hzWfCount; 
            whWfCount += this.tableDataB[i].whWfCount; 
            fsWfCount += this.tableDataB[i].fsWfCount; 
            szydCount += this.tableDataB[i].szydCount; 
            ydwGzCount += this.tableDataB[i].ydwGzCount; 
            hzxgCount += this.tableDataB[i].hzxgCount; 
            szxgCount += this.tableDataB[i].szxgCount; 
            whxgCount += this.tableDataB[i].whxgCount; 
            whYmswCount += this.tableDataB[i].whYmswCount; 
            gzhdCount += this.tableDataB[i].gzhdCount; 
            shwsjf += this.tableDataB[i].shwsjf; 
            jtXb += this.tableDataB[i].jtXb; 
            fzXb += this.tableDataB[i].fzXb; 
            hzYx += this.tableDataB[i].hzYx; 
            gzSd += this.tableDataB[i].gzSd; 
          }
          if (shZyCount != null) {
            shZyCount = shZyCount.toString();
          } else {
            shZyCount = "";
          }
          if (shJmCount != null) {
            shJmCount = shJmCount.toString();
          } else {
            shJmCount = "";
          }
          if (njJmCount != null) {
            njJmCount = njJmCount.toString();
          } else {
            njJmCount = "";
          }
          if (hzWfCount != null) {
            hzWfCount = hzWfCount.toString();
          } else {
            hzWfCount = "";
          }
          if (whWfCount != null) {
            whWfCount = whWfCount.toString();
          } else {
            whWfCount = "";
          }
          if (fsWfCount != null) {
            fsWfCount = fsWfCount.toString();
          } else {
            fsWfCount = "";
          }
          if (szydCount != null) {
            szydCount = szydCount.toString();
          } else {
            szydCount = "";
          }
          if (ydwGzCount != null) {
            ydwGzCount = ydwGzCount.toString();
          } else {
            ydwGzCount = "";
          }
          if (hzxgCount != null) {
            hzxgCount = hzxgCount.toString();
          } else {
            hzxgCount = "";
          }
          if (szxgCount != null) {
            szxgCount = szxgCount.toString();
          } else {
            szxgCount = "";
          }
          if (whxgCount != null) {
            whxgCount = whxgCount.toString();
          } else {
            whxgCount = "";
          }
          if (whYmswCount != null) {
            whYmswCount = whYmswCount.toString();
          } else {
            whYmswCount = "";
          }
          if (gzhdCount != null) {
            gzhdCount = gzhdCount.toString();
          } else {
            gzhdCount = "";
          }
          if (shwsjf != null) {
            shwsjf = shwsjf.toString();
          } else {
            shwsjf = "";
          }
          if (jtXb != null) {
            jtXb = jtXb.toString();
          } else {
            jtXb = "";
          }
          if (fzXb != null) {
            fzXb = fzXb.toString();
          } else {
            fzXb = "";
          }
          if (hzYx != null) {
            hzYx = hzYx.toString();
          } else {
            hzYx = "";
          }
          if (gzSd != null) {
            gzSd = gzSd.toString();
          } else {
            gzSd = "";
          }
          // if (!isNaN(time)) {
          //   time = Math.ceil(time*100)/100;
          // }
          var obj = {  
            time: '总计',  
            shZyCount:shZyCount,  
            shJmCount:shJmCount,
            njJmCount:njJmCount,
            hzWfCount:hzWfCount,
            whWfCount:whWfCount,
            fsWfCount:fsWfCount,
            szydCount:szydCount,
            ydwGzCount:ydwGzCount,
            hzxgCount:hzxgCount,
            szxgCount:szxgCount, 
            whxgCount:whxgCount ,
            whYmswCount:whYmswCount , 
            gzhdCount:gzhdCount , 
            shwsjf:shwsjf , 
            jtXb:jtXb , 
            fzXb:fzXb , 
            hzYx:hzYx , 
            gzSd:gzSd , 
            }
          this.tableDataB.unshift(obj);  
        }     
      },
      // 合并合计第一行
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
          if (rowIndex === 0) {
              if (columnIndex === 0) {
                  return [0, 0];
            } else if (columnIndex === 1) {
                  return [1, 2];
          }
        }
      },
      //查询
      checked(){
            this.loading = true;
            if (this.formLabelAlign.dayType == "customize") {
                this.formLabelAlign.beginTime = this.completeTime[0] ;
                this.formLabelAlign.endTime = this.completeTime[1] ;
            }else{
                this.completeTime = "";
            }
            this.getTuiGuangData();
            this.getTuiGuangHistory();
      },
      //获取历史推广分析数据的方法
      getTuiGuangHistory(){
          this.$axios
          .get(`/spider/customer/romoteDataHistory?beginTime=${this.formLabelAlign.beginTime}&endTime=${this.formLabelAlign.endTime}`)
          .then(res => {
            // console.log(res);
            if (res.data.messageModel.code == 0) {
              this.tableDataB = res.data.dataModel;
              this.summaryFun(); //历史表格插入第一行总计
              this.loading = false
            }else{
              this.$message.error(res.data.messageModel.messageText);
              this.tableDataB = [];
              this.loading = false
            }
            })
          .catch(error => {
            console.log(error);
          });
      },
      //获取推广分析数据的方法
      getTuiGuangData(){
            const beginTime = moment(new Date()).format("YYYY-MM-DD ") ;
            const endTime = moment(new Date()).format("YYYY-MM-DD ");
            this.$axios
            //   .get(`/spider/customer/romoteData?beginTime=${this.formLabelAlign.beginTime}&endTime=${this.formLabelAlign.endTime}`)
            .get(`/spider/customer/romoteData?beginTime=${beginTime}&endTime=${endTime}`)
            .then(res => {
                if (res.data.messageModel.code == 0) {
                    //处理渲染echarts的数据
                    var DisList = [];
                    var yuLiangList = [];
                    var disCountList = [];
                    var slCountList = [];
                    var YLList = [];
                    // console.log(res.data.dataModel);
                    var EchartsCityList = [];
                    this.tableDataA = res.data.dataModel;
                    for (let i = 0; i < res.data.dataModel.length; i++) {
                      var LinShiDisList = res.data.dataModel[i].distributionCount;
                      // this.tableDataA[i].distributionCount = res.data.dataModel[i][0].distributionCount;
                      var LinShiyuLiangList = res.data.dataModel[i].yuLiang;
                      // this.tableDataA[i].yuLiang = res.data.dataModel[i][0].yuLiang;
                      var LinShidisCountList = res.data.dataModel[i].disCount;
                      // this.tableDataA[i].disCount = res.data.dataModel[i][0].disCount;
                      var LinShislCountList = res.data.dataModel[i].slCount;
                      // this.tableDataA[i].slCount = res.data.dataModel[i][0].slCount;
                      var LinShiYLList = res.data.dataModel[i].distributionCount - res.data.dataModel[i].slCount -res.data.dataModel[i].disCount;
                      // this.tableDataA[i].dfpCount = res.data.dataModel[i][0].dfpCount;
                      // this.tableDataA[i].yuLiang = res.data.dataModel[i][0].yuLiang;  //渲染余量
                      let city = res.data.dataModel[i].name;
                      DisList.push(LinShiDisList)
                      yuLiangList.push(LinShiyuLiangList)
                      disCountList.push(LinShidisCountList)
                      slCountList.push(LinShislCountList)
                      YLList.push(LinShiYLList);  //余量临时由前端计算
                      EchartsCityList.push(city);  //所有城市的列表
                    }
                    this.EchartsData.JSSXData = DisList;
                    this.EchartsData.ZRDFData = yuLiangList;
                    this.EchartsData.JRTGData = disCountList;
                    this.EchartsData.YSLData = slCountList;
                    this.EchartsData.YLData = YLList;
                    this.EchartsCityList = EchartsCityList;
                    this.drawPie('main'); 
                    //处理渲染今日推广的数据
                    this.loading = false
                }else{
                    this.$message.error(res.data.messageModel.messageText);
                    this.tableDataA = [];
                    this.loading = false
                }
            })
            .catch(error => {
              console.log(error);
            });
      },
  },
  filters: {
        YSLPanDuan(val){
            if (val == null || val == "" || val == 0) {
                return "";
            }else{
                return "(已受理" + val + ")"
            }
        },
        formatTime(value) {
          if (value == null) {
            return ""
          }else if (value == "总计") {
            return "总计";
          }
          // return moment(value).format("YYYY-MM-DD HH:mm:ss");
          // return moment(value).format("YYYY-MM-DD");
          return moment(value).format("YY-MM-DD");
        },
  },
  mounted(){
      this.drawPie('main')
  },
  created() {
      this.loading = true;
      // const beginTime = new Date();
      // 默认时间 本月
      // this.formLabelAlign.beginTime = moment(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 1)).format("YYYY-MM-DD ") ;
      this.formLabelAlign.beginTime = moment(new Date()).format("YYYY-MM-01 ") ;
      this.formLabelAlign.endTime = moment(new Date()).format("YYYY-MM-DD ");
      this.getTuiGuangData()
      this.getTuiGuangHistory()
  },
  activated() {
      this.loading = true;
      this.getTuiGuangData()
      this.getTuiGuangHistory()
  }
}
</script>

<style lang='scss'>
    .popularizeAnalysis-container{
        // flex-direction:row-reverse;
        word-wrap: break-word; 
        word-break: normal; 
        .el-form-item{
            display: inline-block;
            margin: 0 0 6px 0;
        }
        .el-form-item.BTN {
            display: inline-block;
            /deep/.el-form-item__content{
                margin-left: 20px!important;
          }
        }
        input.el-input__inner {
            width: 170px;
            height: 32px;
            padding-left: 10px;
        }
        .left{
            // height: 100%;
            width: 100%;
            margin: 10px;
            // #main {
            //   width: 100%;
            // }
            .el-button {
                padding: 8px 20px;
            }
        }
        // .right{
        //     // height: 100%;
        //     width: 100%;
        //     margin: 10px;
        //     background-color: skyblue;
            .el-table td {
              padding: 1px 0; 
            }
        // }
    }
</style>